<script setup>
import { ref, computed, onMounted, watch } from 'vue';

// 加载脚本的函数
const loadScript = (src) => {
  return new Promise((resolve, reject) => {
    const script = document.createElement('script');
    script.src = src;
    script.onload = resolve;
    script.onerror = reject;
    document.head.appendChild(script);
  });
};

// 按顺序加载多个脚本
const loadScriptsSequentially = async (scripts) => {
  for (const script of scripts) {
    await loadScript(script);
  }
};

// 测试数据 - 模拟商品列表
const products = ref([
  {
    id: 1,
    name: '可口可乐',
    price: 5.00,
    stock: 100,
    image: '/src/assets/images/logo.svg',
    description: '经典可乐饮料，500ml'
  },
  {
    id: 2,
    name: '薯片',
    price: 8.50,
    stock: 80,
    image: '/src/assets/images/logo.svg',
    description: '原味薯片，150g装'
  },
  {
    id: 3,
    name: '巧克力',
    price: 12.00,
    stock: 60,
    image: '/src/assets/images/logo.svg',
    description: '牛奶巧克力，100g装'
  },
  {
    id: 4,
    name: '矿泉水',
    price: 3.00,
    stock: 150,
    image: '/src/assets/images/logo.svg',
    description: '纯净水，550ml'
  },
  {
    id: 5,
    name: '饼干',
    price: 9.90,
    stock: 70,
    image: '/src/assets/images/logo.svg',
    description: '奶油饼干，200g装'
  },
  {
    id: 6,
    name: '果冻',
    price: 6.50,
    stock: 90,
    image: '/src/assets/images/logo.svg',
    description: '水果味果冻，120g装'
  },
  {
    id: 7,
    name: '三明治',
    price: 15.00,
    stock: 45,
    image: '/src/assets/images/logo.svg',
    description: '鸡蛋火腿三明治，新鲜制作'
  },
  {
    id: 8,
    name: '奶茶',
    price: 10.00,
    stock: 50,
    image: '/src/assets/images/logo.svg',
    description: '珍珠奶茶，500ml'
  },
  {
    id: 9,
    name: '绿茶',
    price: 8.00,
    stock: 60,
    image: '/src/assets/images/logo.svg',
    description: '清爽绿茶，500ml'
  },
  {
    id: 10,
    name: '红茶',
    price: 7.00,
    stock: 70,
    image: '/src/assets/images/logo.svg',
    description: '醇香红茶，500ml'
  },
  {
    id: 11,
    name: '橙汁',
    price: 9.00,
    stock: 55,
    image: '/src/assets/images/logo.svg',
    description: '鲜榨橙汁，300ml'
  },
  {
    id: 12,
    name: '咖啡',
    price: 12.00,
    stock: 40,
    image: '/src/assets/images/logo.svg',
    description: '美式咖啡，350ml'
  },
  {
    id: 13,
    name: '爆米花',
    price: 10.00,
    stock: 65,
    image: '/src/assets/images/logo.svg',
    description: '黄油爆米花，100g'
  },
  {
    id: 14,
    name: '花生',
    price: 6.50,
    stock: 85,
    image: '/src/assets/images/logo.svg',
    description: '香脆花生，200g'
  },
  {
    id: 15,
    name: '瓜子',
    price: 5.50,
    stock: 95,
    image: '/src/assets/images/logo.svg',
    description: '焦香瓜子，250g'
  },
  {
    id: 16,
    name: '糖果',
    price: 8.00,
    stock: 75,
    image: '/src/assets/images/logo.svg',
    description: '什锦糖果，150g'
  },
  {
    id: 17,
    name: '月饼',
    price: 15.00,
    stock: 35,
    image: '/src/assets/images/logo.svg',
    description: '传统月饼，100g'
  },
  {
    id: 18,
    name: '面包',
    price: 7.50,
    stock: 60,
    image: '/src/assets/images/logo.svg',
    description: '软式面包，350g'
  },
  {
    id: 19,
    name: '冰激凌',
    price: 11.00,
    stock: 40,
    image: '/src/assets/images/logo.svg',
    description: '香草冰激凌，100g'
  },
  {
    id: 20,
    name: '巧克力蛋糕',
    price: 20.00,
    stock: 30,
    image: '/src/assets/images/logo.svg',
    description: '浓郁巧克力蛋糕，200g'
  }
]);

// 分页相关 - 添加页码范围计算，让分页更友好
const currentPage = ref(1);
const itemsPerPage = 9;
const totalPages = computed(() => {
  return Math.ceil(filteredProducts.value.length / itemsPerPage);
});

// 计算要显示的页码范围（最多显示5个页码）
const pageRange = computed(() => {
  const total = totalPages.value;
  const current = currentPage.value;
  const delta = 2; // 当前页前后各显示多少页
  
  let start = Math.max(current - delta, 1);
  let end = Math.min(current + delta, total);
  
  // 调整start和end，确保始终显示5个页码（如果总页数>=5）
  if (total >= 5) {
    if (end - start + 1 < 5) {
      if (start === 1) {
        end = Math.min(start + 4, total);
      } else if (end === total) {
        start = Math.max(end - 4, 1);
      }
    }
  }
  
  return { start, end };
});

// 搜索相关
const searchTerm = ref('');
const filteredProducts = computed(() => {
  if (!searchTerm.value) return products.value;
  const term = searchTerm.value.toLowerCase();
  
  // 只匹配商品名称开头的字母
  return products.value.filter(product => {
    // 如果只有一个字母，则匹配首字母
    if (term.length === 1) {
      const firstChar = product.name.charAt(0).toLowerCase();
      const firstCharPinyin = getPinyinFirstChar(product.name.charAt(0));
      return firstChar === term || firstCharPinyin === term;
    } 
    // 否则进行常规匹配
    else {
      return product.name.toLowerCase().includes(term);
    }
  });
});

// 分页显示的商品
const displayedProducts = computed(() => {
  const startIndex = (currentPage.value - 1) * itemsPerPage;
  const endIndex = startIndex + itemsPerPage;
  return filteredProducts.value.slice(startIndex, endIndex);
});

// 获取汉字拼音首字母 - 改进版，更加通用
const getPinyinFirstChar = (char) => {
  // 常用汉字拼音首字母映射表
  const pinyinMap = {
    // 按拼音分组
    // A
    '啊': 'a', '爱': 'a', '安': 'a', '暗': 'a', '矮': 'a',
    // B
    '把': 'b', '八': 'b', '白': 'b', '百': 'b', '不': 'b', '便': 'b', '饼': 'b', '巴': 'b', '爆': 'b', '包': 'b', '冰': 'b', '波': 'b', '步': 'b',
    // C
    '擦': 'c', '才': 'c', '菜': 'c', '茶': 'c', '差': 'c', '长': 'c', '常': 'c', '厂': 'c', '车': 'c', '橙': 'c', '吃': 'c', '出': 'c',
    // D
    '打': 'd', '大': 'd', '带': 'd', '但': 'd', '蛋': 'd', '当': 'd', '到': 'd', '道': 'd', '的': 'd', '得': 'd', '地': 'd', '东': 'd', '懂': 'd', '动': 'd', '冻': 'd', '都': 'd',
    // E
    '饿': 'e', '恩': 'e', '而': 'e', '耳': 'e',
    // F
    '发': 'f', '方': 'f', '放': 'f', '飞': 'f', '非': 'f', '费': 'f', '分': 'f', '风': 'f', '封': 'f', '佛': 'f', '否': 'f', '夫': 'f', '服': 'f', '浮': 'f', '父': 'f', '符': 'f', '啡': 'f',
    // G
    '该': 'g', '改': 'g', '干': 'g', '甘': 'g', '刚': 'g', '高': 'g', '搞': 'g', '歌': 'g', '格': 'g', '个': 'g', '各': 'g', '给': 'g', '根': 'g', '更': 'g', '工': 'g', '公': 'g', '狗': 'g', '瓜': 'g', '果': 'g', '贵': 'g', '过': 'g',
    // H
    '哈': 'h', '还': 'h', '孩': 'h', '海': 'h', '好': 'h', '喝': 'h', '和': 'h', '河': 'h', '很': 'h', '黑': 'h', '红': 'h', '后': 'h', '候': 'h', '忽': 'h', '花': 'h', '话': 'h', '坏': 'h', '欢': 'h', '黄': 'h', '回': 'h', '会': 'h',
    // J
    '几': 'j', '己': 'j', '加': 'j', '家': 'j', '假': 'j', '间': 'j', '简': 'j', '见': 'j', '江': 'j', '讲': 'j', '叫': 'j', '较': 'j', '接': 'j', '街': 'j', '节': 'j', '解': 'j', '姐': 'j', '金': 'j', '进': 'j', '京': 'j', '经': 'j', '九': 'j', '酒': 'j', '久': 'j', '就': 'j', '举': 'j', '激': 'j',
    // K
    '开': 'k', '看': 'k', '考': 'k', '靠': 'k', '可': 'k', '渴': 'k', '刻': 'k', '客': 'k', '课': 'k', '空': 'k', '口': 'k', '快': 'k', '筷': 'k', '宽': 'k', '况': 'k', '困': 'k', '括': 'k', '矿': 'k', '克': 'k', '咖': 'k',
    // L
    '拉': 'l', '来': 'l', '蓝': 'l', '老': 'l', '乐': 'l', '了': 'l', '累': 'l', '冷': 'l', '离': 'l', '礼': 'l', '李': 'l', '理': 'l', '力': 'l', '立': 'l', '丽': 'l', '历': 'l', '利': 'l', '凉': 'l', '两': 'l', '亮': 'l', '谅': 'l', '量': 'l', '料': 'l', '林': 'l', '零': 'l', '六': 'l', '楼': 'l', '路': 'l', '录': 'l', '绿': 'l', '律': 'l', '凌': 'l',
    // M
    '妈': 'm', '马': 'm', '码': 'm', '吗': 'm', '买': 'm', '麦': 'm', '卖': 'm', '满': 'm', '慢': 'm', '忙': 'm', '毛': 'm', '么': 'm', '没': 'm', '每': 'm', '门': 'm', '们': 'm', '米': 'm', '面': 'm', '明': 'm', '名': 'm', '母': 'm', '目': 'm',
    // N
    '那': 'n', '拿': 'n', '哪': 'n', '内': 'n', '能': 'n', '你': 'n', '年': 'n', '念': 'n', '宁': 'n', '牛': 'n', '女': 'n', '奶': 'n',
    // O
    '哦': 'o',
    // P
    '怕': 'p', '派': 'p', '盘': 'p', '旁': 'p', '胖': 'p', '跑': 'p', '朋': 'p', '片': 'p', '漂': 'p', '票': 'p', '平': 'p', '七': 'q', '期': 'q', '其': 'q', '奇': 'q', '骑': 'q', '起': 'q', '气': 'q', '汽': 'q', '千': 'q', '前': 'q', '墙': 'q', '且': 'q', '青': 'q', '轻': 'q', '清': 'q', '情': 'q', '请': 'q', '秋': 'q', '球': 'q', '区': 'q', '取': 'q', '去': 'q', '趣': 'q', '全': 'q', '泉': 'q', '巧': 'q',
    // R
    '让': 'r', '热': 'r', '人': 'r', '认': 'r', '日': 'r', '容': 'r', '如': 'r', '入': 'r',
    // S
    '三': 's', '色': 's', '沙': 's', '上': 's', '少': 's', '谁': 's', '深': 's', '生': 's', '声': 's', '十': 's', '什': 's', '时': 's', '识': 's', '事': 's', '是': 's', '收': 's', '手': 's', '守': 's', '首': 's', '书': 's', '树': 's', '双':'s', '水': 's', '睡': 's', '说': 's', '思': 's', '送': 's', '受': 's', '薯': 's',
    // T
    '他': 't', '她': 't', '它': 't', '太': 't', '谈': 't', '糖': 't', '汤': 't', '堂': 't', '套': 't', '特': 't', '踢': 't', '题': 't', '体': 't', '天': 't', '填': 't', '条': 't', '铁': 't', '听': 't', '厅': 't', '通': 't', '同': 't', '头': 't', '图': 't', '推': 't', '腿': 't',
    // W
    '外': 'w', '完': 'w', '万': 'w', '王': 'w', '网': 'w', '往': 'w', '望': 'w', '为': 'w', '文': 'w', '我': 'w', '卧': 'w', '无': 'w', '五': 'w', '午': 'w', '务': 'w', '武': 'w',
    // X
    '西': 'x', '吸': 'x', '希': 'x', '息': 'x', '习': 'x', '喜': 'x', '洗': 'x', '系': 'x', '下': 'x', '夏': 'x', '先': 'x', '香': 'x', '想': 'x', '向': 'x', '小': 'x', '笑': 'x', '校': 'x', '些': 'x', '写': 'x', '谢': 'x', '新': 'x', '辛': 'x', '心': 'x', '信': 'x', '星': 'x', '行': 'x', '醒': 'x', '姓': 'x', '许': 'x', '选': 'x', '学': 'x',
    // Y
    '亚': 'y', '呀': 'y', '言': 'y', '颜': 'y', '眼': 'y', '阳': 'y', '样': 'y', '要': 'y', '药': 'y', '也': 'y', '业': 'y', '夜': 'y', '一': 'y', '医': 'y', '已': 'y', '以': 'y', '意': 'y', '因': 'y', '音': 'y', '印': 'y', '英': 'y', '应': 'y', '影': 'y', '用': 'y', '油': 'y', '游': 'y', '友': 'y', '有': 'y', '又': 'y', '右': 'y', '鱼': 'y', '遇': 'y', '元': 'y', '员': 'y', '园': 'y', '原': 'y', '远': 'y', '院': 'y', '愿': 'y', '月': 'y', '越': 'y', '云': 'y',
    // Z
    '再': 'z', '在': 'z', '早': 'z', '怎': 'z', '站': 'z', '张': 'z', '找': 'z', '照': 'z', '着': 'z', '这': 'z', '真': 'z', '整': 'z', '正': 'z', '知': 'z', '之': 'z', '直': 'z', '只': 'z', '纸': 'z', '制': 'z', '中': 'z', '钟': 'z', '种': 'z', '重': 'z', '周': 'z', '洲': 'z', '主': 'z', '住': 'z', '助': 'z', '祝': 'z', '注': 'z', '字': 'z', '子': 'z', '走': 'z', '最': 'z', '坐': 'z', '做': 'z', '昨': 'z', '治': 'z'
  };
  
  // 如果是英文字母，直接返回小写
  if (/[a-zA-Z]/.test(char)) {
    return char.toLowerCase();
  }
  
  // 如果是汉字且在映射表中存在
  if (pinyinMap[char]) {
    return pinyinMap[char];
  }
  
  // 对于不在映射表中的汉字，可以使用一个通用规则
  // 这里简单处理，如果不知道拼音，返回特殊字符
  return '*';
};

// 获取整个字符串的拼音首字母缩写
const getPinyinAbbr = (text) => {
  let result = '';
  for (let i = 0; i < text.length; i++) {
    result += getPinyinFirstChar(text[i]);
  }
  return result;
};

// 切换页面
const goToPage = (page) => {
  currentPage.value = page;
  // 滚动到页面顶部
  window.scrollTo({ top: 0, behavior: 'smooth' });
};

// 上一页
const prevPage = () => {
  if (currentPage.value > 1) {
    goToPage(currentPage.value - 1);
  }
};

// 下一页
const nextPage = () => {
  if (currentPage.value < totalPages.value) {
    goToPage(currentPage.value + 1);
  }
};

// 监听搜索词变化，重置到第一页
watch(searchTerm, () => {
  currentPage.value = 1;
});

// 购物车相关
const cart = ref([]);
const showCart = ref(false);

// 计算购物车中的商品总数
const cartCount = computed(() => {
  return cart.value.reduce((total, item) => total + item.quantity, 0);
});

// 计算购物车中的商品总价
const cartTotal = computed(() => {
  return cart.value.reduce((total, item) => {
    return total + (item.price * item.quantity);
  }, 0).toFixed(2);
});

// 添加商品到购物车
const addToCart = (product) => {
  if (product.stock <= 0) return;
  
  const existingItem = cart.value.find(item => item.id === product.id);
  
  if (existingItem) {
    if (existingItem.quantity < product.stock) {
      existingItem.quantity++;
    }
  } else {
    cart.value.push({
      id: product.id,
      name: product.name,
      price: product.price,
      image: product.image,
      quantity: 1,
      stock: product.stock
    });
  }
};

// 从购物车中移除商品
const removeFromCart = (productId) => {
  const existingItemIndex = cart.value.findIndex(item => item.id === productId);
  
  if (existingItemIndex >= 0) {
    const item = cart.value[existingItemIndex];
    
    if (item.quantity > 1) {
      item.quantity--;
    } else {
      cart.value.splice(existingItemIndex, 1);
    }
  }
};

// 清空购物车
const clearCart = () => {
  cart.value = [];
};

// 结算购物车
const checkout = () => {
  if (cart.value.length === 0) {
    alert('您的购物车是空的！');
    return;
  }
  
  // 执行结算逻辑，实际场景可能需要跳转到结算页面或调用API
  alert(`结算成功！总金额: ¥${cartTotal.value}`);
  
  // 更新商品库存
  cart.value.forEach(item => {
    const productIndex = products.value.findIndex(p => p.id === item.id);
    if (productIndex !== -1) {
      products.value[productIndex].stock -= item.quantity;
    }
  });

  // 清空购物车
  clearCart();
};

// 生成商品的占位图URL
const getImageUrl = (product) => {
  // 返回默认图片
  return './src/assets/images/logo.svg';
};

// 监听购物车变化，保存到本地存储
const saveCartToLocalStorage = () => {
  localStorage.setItem('cart', JSON.stringify(cart.value));
};

// 监控购物车变化并保存到localStorage
watch(cart, (newValue) => {
  saveCartToLocalStorage();
}, { deep: true });
</script>

<script>
// 在组件加载时加载所需的脚本和购物车数据
onMounted(async () => {
  try {
    // 加载购物车数据
    const savedCart = localStorage.getItem('cart');
    if (savedCart) {
      try {
        cart.value = JSON.parse(savedCart);
      } catch (e) {
        console.error('Failed to parse cart data from localStorage');
      }
    }

    // 注意：所有路径必须以 `/` 开头，对应 public 目录
    // 修改脚本加载顺序，确保基础库首先加载
    await loadScriptsSequentially([
      '/src/assets/vendors/js/vendor-bundle-base.js',
      '/src/assets/vendors/bootstrap-datepicker/bootstrap-datepicker.min.js',
      '/src/assets/vendors/chart.js/Chart.min.js',
      '/src/assets/vendors/progressbar.js/progressbar.min.js'
    ]);

    // 基础库加载完成后，加载依赖于基础库的其他脚本
    await loadScriptsSequentially([
      '/src/utils/js/off-canvas.js',
      '/src/utils/js/hoverable-collapse.js',
      '/src/utils/js/template.js',
      '/src/utils/js/settings.js',
      '/src/utils/js/todolist.js'
    ]);

    // 最后加载依赖前面所有脚本的数据和图表脚本
    await loadScriptsSequentially([
      '/src/utils/js/dashboard.js',
      '/src/utils/js/Chart.roundedBarCharts.js'
    ]);
  } catch (err) {
    console.error('脚本加载失败:', err);
  }
});
</script>

<template>
  <div class="container-scroller">
    <nav class="navbar default-layout col-lg-12 col-12 p-0 fixed-top d-flex align-items-top flex-row">
      <div class="text-center navbar-brand-wrapper d-flex align-items-center justify-content-start">
        <div class="me-3">
          <button class="navbar-toggler navbar-toggler align-self-center" type="button" data-bs-toggle="minimize">
            <span class="icon-menu"></span>
          </button>
        </div>
        <div>
          <a class="navbar-brand brand-logo" href="../../index.html">
            <img src="../../assets/images/logo.svg" alt="logo" />
          </a>
          <a class="navbar-brand brand-logo-mini" href="../../index.html">
            <img src="../../assets/images/logo-mini.svg" alt="logo" />
          </a>
        </div>
      </div>
      <div class="navbar-menu-wrapper d-flex align-items-top">
        <ul class="navbar-nav">
          <li class="nav-item font-weight-semibold d-none d-lg-block ms-0">
            <h1 class="welcome-text">早上好，<span class="text-black fw-bold">约翰·多</span></h1>
            <h3 class="welcome-sub-text">您本周的表现摘要</h3>
          </li>
        </ul>
        <ul class="navbar-nav ms-auto">
          <li class="nav-item dropdown d-none d-lg-block">
            <a class="nav-link dropdown-bordered dropdown-toggle dropdown-toggle-split" id="messageDropdown" href="#" data-bs-toggle="dropdown" aria-expanded="false"> 选择类别 </a>
            <div class="dropdown-menu dropdown-menu-right navbar-dropdown preview-list pb-0" aria-labelledby="messageDropdown">
              <a class="dropdown-item py-3">
                <p class="mb-0 font-weight-medium float-left">选择类别</p>
              </a>
              <div class="dropdown-divider"></div>
              <a class="dropdown-item preview-item">
                <div class="preview-item-content flex-grow py-2">
                  <p class="preview-subject ellipsis font-weight-medium text-dark">Bootstrap 套件</p>
                  <p class="fw-light small-text mb-0">这是一个包含 16 个独特仪表板的套件</p>
                </div>
              </a>
              <a class="dropdown-item preview-item">
                <div class="preview-item-content flex-grow py-2">
                  <p class="preview-subject ellipsis font-weight-medium text-dark">Angular 套件</p>
                  <p class="fw-light small-text mb-0">您 Angular 项目所需的一切</p>
                </div>
              </a>
              <a class="dropdown-item preview-item">
                <div class="preview-item-content flex-grow py-2">
                  <p class="preview-subject ellipsis font-weight-medium text-dark">VUE 套件</p>
                  <p class="fw-light small-text mb-0">6 个高级 Vue 管理仪表板的套件</p>
                </div>
              </a>
              <a class="dropdown-item preview-item">
                <div class="preview-item-content flex-grow py-2">
                  <p class="preview-subject ellipsis font-weight-medium text-dark">React 套件</p>
                  <p class="fw-light small-text mb-0">8 个高级 React 管理仪表板的套件</p>
                </div>
              </a>
            </div>
          </li>
          <li class="nav-item d-none d-lg-block">
            <div id="datepicker-popup" class="input-group date datepicker navbar-date-picker">
              <span class="input-group-addon input-group-prepend border-right">
                <span class="icon-calendar input-group-text calendar-icon"></span>
              </span>
              <input type="text" class="form-control">
            </div>
          </li>
          <li class="nav-item">
            <form class="search-form" action="#">
              <i class="icon-search"></i>
              <input type="search" class="form-control" placeholder="搜索这里" title="搜索这里" v-model="searchTerm">
            </form>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link count-indicator" id="notificationDropdown" href="#" data-bs-toggle="dropdown">
              <i class="icon-mail icon-lg"></i>
            </a>
            <div class="dropdown-menu dropdown-menu-right navbar-dropdown preview-list pb-0" aria-labelledby="notificationDropdown">
              <a class="dropdown-item py-3 border-bottom">
                <p class="mb-0 font-weight-medium float-left">您有 4 条新通知</p>
                <span class="badge badge-pill badge-primary float-right">查看全部</span>
              </a>
              <a class="dropdown-item preview-item py-3">
                <div class="preview-thumbnail">
                  <i class="mdi mdi-alert m-auto text-primary"></i>
                </div>
                <div class="preview-item-content">
                  <h6 class="preview-subject fw-normal text-dark mb-1">应用程序错误</h6>
                  <p class="fw-light small-text mb-0">刚刚</p>
                </div>
              </a>
              <a class="dropdown-item preview-item py-3">
                <div class="preview-thumbnail">
                  <i class="mdi mdi-settings m-auto text-primary"></i>
                </div>
                <div class="preview-item-content">
                  <h6 class="preview-subject fw-normal text-dark mb-1">设置</h6>
                  <p class="fw-light small-text mb-0">私人消息</p>
                </div>
              </a>
              <a class="dropdown-item preview-item py-3">
                <div class="preview-thumbnail">
                  <i class="mdi mdi-airballoon m-auto text-primary"></i>
                </div>
                <div class="preview-item-content">
                  <h6 class="preview-subject fw-normal text-dark mb-1">新用户注册</h6>
                  <p class="fw-light small-text mb-0">2 天前</p>
                </div>
              </a>
            </div>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link count-indicator" id="countDropdown" href="#" data-bs-toggle="dropdown" aria-expanded="false">
              <i class="icon-bell"></i>
              <span class="count"></span>
            </a>
            <div class="dropdown-menu dropdown-menu-right navbar-dropdown preview-list pb-0" aria-labelledby="countDropdown">
              <a class="dropdown-item py-3">
                <p class="mb-0 font-weight-medium float-left">您有 7 封未读邮件</p>
                <span class="badge badge-pill badge-primary float-right">查看全部</span>
              </a>
              <div class="dropdown-divider"></div>
              <a class="dropdown-item preview-item">
                <div class="preview-thumbnail">
                  <img src="../../assets/images/faces/face10.jpg" alt="image" class="img-sm profile-pic">
                </div>
                <div class="preview-item-content flex-grow py-2">
                  <p class="preview-subject ellipsis font-weight-medium text-dark">玛丽安·加纳</p>
                  <p class="fw-light small-text mb-0">会议已取消</p>
                </div>
              </a>
              <a class="dropdown-item preview-item">
                <div class="preview-thumbnail">
                  <img src="../../assets/images/faces/face12.jpg" alt="image" class="img-sm profile-pic">
                </div>
                <div class="preview-item-content flex-grow py-2">
                  <p class="preview-subject ellipsis font-weight-medium text-dark">大卫·格雷</p>
                  <p class="fw-light small-text mb-0">会议已取消</p>
                </div>
              </a>
              <a class="dropdown-item preview-item">
                <div class="preview-thumbnail">
                  <img src="../../assets/images/faces/face1.jpg" alt="image" class="img-sm profile-pic">
                </div>
                <div class="preview-item-content flex-grow py-2">
                  <p class="preview-subject ellipsis font-weight-medium text-dark">特拉维斯·詹金斯</p>
                  <p class="fw-light small-text mb-0">会议已取消</p>
                </div>
              </a>
            </div>
          </li>
          <li class="nav-item dropdown d-none d-lg-block user-dropdown">
            <a class="nav-link" id="UserDropdown" href="#" data-bs-toggle="dropdown" aria-expanded="false">
              <img class="img-xs rounded-circle" src="../../assets/images/faces/face8.jpg" alt="Profile image"> </a>
            <div class="dropdown-menu dropdown-menu-right navbar-dropdown" aria-labelledby="UserDropdown">
              <div class="dropdown-header text-center">
                <img class="img-md rounded-circle" src="../../assets/images/faces/face8.jpg" alt="Profile image">
                <p class="mb-1 mt-3 font-weight-semibold">艾伦·莫雷诺</p>
                <p class="fw-light text-muted mb-0">allenmoreno@gmail.com</p>
              </div>
              <a class="dropdown-item"><i class="dropdown-item-icon mdi mdi-account-outline text-primary me-2"></i> 我的资料 <span class="badge badge-pill badge-danger">1</span></a>
              <a class="dropdown-item"><i class="dropdown-item-icon mdi mdi-message-text-outline text-primary me-2"></i> 消息</a>
              <a class="dropdown-item"><i class="dropdown-item-icon mdi mdi-calendar-check-outline text-primary me-2"></i> 活动</a>
              <a class="dropdown-item"><i class="dropdown-item-icon mdi mdi-help-circle-outline text-primary me-2"></i> 常见问题</a>
              <a class="dropdown-item"><i class="dropdown-item-icon mdi mdi-power text-primary me-2"></i> 登出</a>
            </div>
          </li>
        </ul>
        <button class="navbar-toggler navbar-toggler-right d-lg-none align-self-center" type="button" data-bs-toggle="offcanvas">
          <span class="mdi mdi-menu"></span>
        </button>
      </div>
    </nav>
    <!-- partial -->
    <div class="container-fluid page-body-wrapper">
      <!-- partial:../../partials/_settings-panel.html -->
      <div class="theme-setting-wrapper">
        <div id="settings-trigger"><i class="ti-settings"></i></div>
        <div id="theme-settings" class="settings-panel">
          <i class="settings-close ti-close"></i>
          <p class="settings-heading">侧边栏皮肤</p>
          <div class="sidebar-bg-options selected" id="sidebar-light-theme"><div class="img-ss rounded-circle bg-light border me-3"></div>浅色</div>
          <div class="sidebar-bg-options" id="sidebar-dark-theme"><div class="img-ss rounded-circle bg-dark border me-3"></div>深色</div>
          <p class="settings-heading mt-2">头部皮肤</p>
          <div class="color-tiles mx-0 px-4">
            <div class="tiles success"></div>
            <div class="tiles warning"></div>
            <div class="tiles danger"></div>
            <div class="tiles info"></div>
            <div class="tiles dark"></div>
            <div class="tiles default"></div>
          </div>
        </div>
      </div>
      <div id="right-sidebar" class="settings-panel">
        <i class="settings-close ti-close"></i>
        <ul class="nav nav-tabs border-top" id="setting-panel" role="tablist">
          <li class="nav-item">
            <a class="nav-link active" id="todo-tab" data-bs-toggle="tab" href="#todo-section" role="tab" aria-controls="todo-section" aria-expanded="true">待办事项</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" id="chats-tab" data-bs-toggle="tab" href="#chats-section" role="tab" aria-controls="chats-section">聊天</a>
          </li>
        </ul>
        <div class="tab-content" id="setting-content">
          <div class="tab-pane fade show active scroll-wrapper" id="todo-section" role="tabpanel" aria-labelledby="todo-section">
            <div class="add-items d-flex px-3 mb-0">
              <form class="form w-100">
                <div class="form-group d-flex">
                  <input type="text" class="form-control todo-list-input" placeholder="添加待办事项">
                  <button type="submit" class="add btn btn-primary todo-list-add-btn" id="add-task">添加</button>
                </div>
              </form>
            </div>
            <div class="list-wrapper px-3">
              <ul class="d-flex flex-column-reverse todo-list">
                <li>
                  <div class="form-check">
                    <label class="form-check-label">
                      <input class="checkbox" type="checkbox">
                      团队评审会议在下午 3 点
                    </label>
                  </div>
                  <i class="remove ti-close"></i>
                </li>
                <li>
                  <div class="form-check">
                    <label class="form-check-label">
                      <input class="checkbox" type="checkbox">
                      准备演示
                    </label>
                  </div>
                  <i class="remove ti-close"></i>
                </li>
                <li>
                  <div class="form-check">
                    <label class="form-check-label">
                      <input class="checkbox" type="checkbox">
                      解决所有今天到期的低优先级票据
                    </label>
                  </div>
                  <i class="remove ti-close"></i>
                </li>
                <li class="completed">
                  <div class="form-check">
                    <label class="form-check-label">
                      <input class="checkbox" type="checkbox" checked>
                      安排下周的会议
                    </label>
                  </div>
                  <i class="remove ti-close"></i>
                </li>
                <li class="completed">
                  <div class="form-check">
                    <label class="form-check-label">
                      <input class="checkbox" type="checkbox" checked>
                      项目评审
                    </label>
                  </div>
                  <i class="remove ti-close"></i>
                </li>
              </ul>
            </div>
            <h4 class="px-3 text-muted mt-5 fw-light mb-0">事件</h4>
            <div class="events pt-4 px-3">
              <div class="wrapper d-flex mb-2">
                <i class="ti-control-record text-primary me-2"></i>
                <span>2018年2月11日</span>
              </div>
              <p class="mb-0 font-weight-thin text-gray">创建组件页面构建 js</p>
              <p class="text-gray mb-0">会话总数</p>
            </div>
            <div class="events pt-4 px-3">
              <div class="wrapper d-flex mb-2">
                <i class="ti-control-record text-primary me-2"></i>
                <span>2018年2月7日</span>
              </div>
              <p class="mb-0 font-weight-thin text-gray">与阿丽莎的会议</p>
              <p class="text-gray mb-0 ">给莎拉·格雷打电话</p>
            </div>
          </div>
          <!-- To do section tab ends -->
          <div class="tab-pane fade" id="chats-section" role="tabpanel" aria-labelledby="chats-section">
            <div class="d-flex align-items-center justify-content-between border-bottom">
              <p class="settings-heading border-top-0 mb-3 pl-3 pt-0 border-bottom-0 pb-0">朋友</p>
              <small class="settings-heading border-top-0 mb-3 pt-0 border-bottom-0 pb-0 pr-3 fw-normal">查看全部</small>
            </div>
            <ul class="chat-list">
              <li class="list active">
                <div class="profile"><img src="../../assets/images/faces/face1.jpg" alt="image"><span class="online"></span></div>
                <div class="info">
                  <p>托马斯·道格拉斯</p>
                  <p>可用</p>
                </div>
                <small class="text-muted my-auto">19 分钟前</small>
              </li>
              <li class="list">
                <div class="profile"><img src="../../assets/images/faces/face2.jpg" alt="image"><span class="offline"></span></div>
                <div class="info">
                  <div class="wrapper d-flex">
                    <p>凯瑟琳</p>
                  </div>
                  <p>离开</p>
                </div>
                <div class="badge badge-success badge-pill my-auto mx-2">4</div>
                <small class="text-muted my-auto">23 分钟前</small>
              </li>
              <li class="list">
                <div class="profile"><img src="../../assets/images/faces/face3.jpg" alt="image"><span class="online"></span></div>
                <div class="info">
                  <p>丹尼尔·拉塞尔</p>
                  <p>可用</p>
                </div>
                <small class="text-muted my-auto">14 分钟前</small>
              </li>
              <li class="list">
                <div class="profile"><img src="../../assets/images/faces/face4.jpg" alt="image"><span class="offline"></span></div>
                <div class="info">
                  <p>詹姆斯·理查森</p>
                  <p>离开</p>
                </div>
                <small class="text-muted my-auto">2 分钟前</small>
              </li>
              <li class="list">
                <div class="profile"><img src="../../assets/images/faces/face5.jpg" alt="image"><span class="online"></span></div>
                <div class="info">
                  <p>麦德琳·肯尼迪</p>
                  <p>可用</p>
                </div>
                <small class="text-muted my-auto">5 分钟前</small>
              </li>
              <li class="list">
                <div class="profile"><img src="../../assets/images/faces/face6.jpg" alt="image"><span class="online"></span></div>
                <div class="info">
                  <p>莎拉·格雷夫斯</p>
                  <p>可用</p>
                </div>
                <small class="text-muted my-auto">47 分钟前</small>
              </li>
            </ul>
          </div>
          <!-- chat tab ends -->
        </div>
      </div>
      <!-- partial -->
      <!-- partial:../../partials/_sidebar.html -->
      <nav class="sidebar sidebar-offcanvas" id="sidebar">
        <ul class="nav">
          <li class="nav-item">
            <a class="nav-link" href="../../index.html">
              <i class="mdi mdi-grid-large menu-icon"></i>
              <span class="menu-title">仪表盘</span>
            </a>
          </li>

          <li class="nav-item nav-category">管理员操作</li>
          <li class="nav-item">
            <a class="nav-link" data-bs-toggle="collapse" href="#ui-sb" aria-expanded="false" aria-controls="ui-sb">
              <i class="menu-icon mdi mdi-floor-plan"></i>
              <span class="menu-title">设备管理</span>
              <i class="menu-arrow"></i>
            </a>
            <div class="collapse" id="ui-sb">
              <ul class="nav flex-column sub-menu">
                <li class="nav-item"> <a class="nav-link" href="pages/equipment-management/status.html">设备状态</a></li>
              </ul>
            </div>
          </li>

          <li class="nav-item nav-category">UI 元素</li>
          <li class="nav-item">
            <a class="nav-link" data-bs-toggle="collapse" href="#ui-basic" aria-expanded="false" aria-controls="ui-basic">
              <i class="menu-icon mdi mdi-floor-plan"></i>
              <span class="menu-title">UI 元素</span>
              <i class="menu-arrow"></i>
            </a>
            <div class="collapse" id="ui-basic">
              <ul class="nav flex-column sub-menu">
                <li class="nav-item"> <a class="nav-link" href="../../pages/ui-features/buttons.html">按钮</a></li>
                <li class="nav-item"> <a class="nav-link" href="../../pages/ui-features/dropdowns.html">下拉菜单</a></li>
                <li class="nav-item"> <a class="nav-link" href="../../pages/ui-features/typography.html">排版</a></li>
              </ul>
            </div>
          </li>
          <li class="nav-item nav-category">表单和数据</li>
          <li class="nav-item">
            <a class="nav-link" data-bs-toggle="collapse" href="#form-elements" aria-expanded="false" aria-controls="form-elements">
              <i class="menu-icon mdi mdi-card-text-outline"></i>
              <span class="menu-title">表单元素</span>
              <i class="menu-arrow"></i>
            </a>
            <div class="collapse" id="form-elements">
              <ul class="nav flex-column sub-menu">
                <li class="nav-item"><a class="nav-link" href="../../pages/forms/basic_elements.html">基本元素</a></li>
              </ul>
            </div>
          </li>
          <li class="nav-item">
            <a class="nav-link" data-bs-toggle="collapse" href="#charts" aria-expanded="false" aria-controls="charts">
              <i class="menu-icon mdi mdi-chart-line"></i>
              <span class="menu-title">图表</span>
              <i class="menu-arrow"></i>
            </a>
            <div class="collapse" id="charts">
              <ul class="nav flex-column sub-menu">
                <li class="nav-item"> <a class="nav-link" href="../../pages/charts/chartjs.html">ChartJs</a></li>
              </ul>
            </div>
          </li>
          <li class="nav-item">
            <a class="nav-link" data-bs-toggle="collapse" href="#tables" aria-expanded="false" aria-controls="tables">
              <i class="menu-icon mdi mdi-table"></i>
              <span class="menu-title">表格</span>
              <i class="menu-arrow"></i>
            </a>
            <div class="collapse" id="tables">
              <ul class="nav flex-column sub-menu">
                <li class="nav-item"> <a class="nav-link" href="../../pages/tables/basic-table.html">基本表格</a></li>
              </ul>
            </div>
          </li>
          <li class="nav-item">
            <a class="nav-link" data-bs-toggle="collapse" href="#icons" aria-expanded="false" aria-controls="icons">
              <i class="menu-icon mdi mdi-layers-outline"></i>
              <span class="menu-title">图标</span>
              <i class="menu-arrow"></i>
            </a>
            <div class="collapse" id="icons">
              <ul class="nav flex-column sub-menu">
                <li class="nav-item"> <a class="nav-link" href="../../pages/icons/mdi.html">Mdi 图标</a></li>
              </ul>
            </div>
          </li>
          <li class="nav-item nav-category">页面</li>
          <li class="nav-item">
            <a class="nav-link" data-bs-toggle="collapse" href="#auth" aria-expanded="false" aria-controls="auth">
              <i class="menu-icon mdi mdi-account-circle-outline"></i>
              <span class="menu-title">用户页面</span>
              <i class="menu-arrow"></i>
            </a>
            <div class="collapse" id="auth">
              <ul class="nav flex-column sub-menu">
                <li class="nav-item"> <a class="nav-link" href="../../pages/samples/login.html"> 登录 </a></li>
              </ul>
            </div>
          </li>
          <li class="nav-item nav-category">帮助</li>
          <li class="nav-item">
            <a class="nav-link" href="#">
              <i class="menu-icon mdi mdi-file-document"></i>
              <span class="menu-title">文档</span>
            </a>
          </li>
        </ul>
      </nav>
      <!-- partial -->
      <!--主部分-->
      <div class="main-panel">
        <div class="content-wrapper">
          <div class="row">
            <div class="col-lg-12 grid-margin stretch-card">
              <div class="card">
                <div class="card-body">
                  <div class="d-flex justify-content-between align-items-center mb-4">
                    <h4 class="card-title">零食小店</h4>
                    
                    <!-- 使用框架统一的搜索框 -->
                    <div class="nav-item d-none d-lg-flex">
                      <form class="search-form">
<!--                        <i class="icon-search"></i>
                        <input
                          type="search"
                          class="form-control"
                          placeholder="搜索这里"
                          title="搜索这里"
                          v-model="searchTerm">-->
                      </form>
                    </div>
                  </div>
                  
                  <!-- 商品列表 -->
                  <div class="row">
                    <div v-if="filteredProducts.length === 0" class="col-12 text-center py-5">
                      <p class="text-muted">没有找到匹配的商品</p>
                    </div>
                    
                    <div 
                      v-for="product in displayedProducts" 
                      :key="product.id" 
                      class="col-md-4 col-sm-6 col-6 grid-margin stretch-card"
                    >
                      <div class="card product-card">
                        <div class="card-body p-3">
                          <div class="product-img">
                            <img 
                              :src="getImageUrl(product)" 
                              :alt="product.name"
                              class="img-fluid mx-auto d-block"
                            >
                          </div>
                          <div class="product-info mt-2">
                            <h5 class="product-name">{{ product.name }}</h5>
                            <p class="product-description">{{ product.description }}</p>
                            <div class="d-flex justify-content-between align-items-center mt-2">
                              <div class="price-info">
                                <p class="product-price">¥{{ product.price.toFixed(2) }}</p>
                                <p class="product-stock" :class="{ 'low-stock': product.stock < 10 }">
                                  库存: {{ product.stock }}
                                </p>
                              </div>
                              <div class="product-actions">
                                <button 
                                  class="btn btn-sm btn-inverse-primary"
                                  @click="removeFromCart(product.id)"
                                  :disabled="!cart.find(item => item.id === product.id)"
                                >
                                  <i class="mdi mdi-minus"></i>
                                </button>
                                <span class="quantity-display mx-2">
                                  {{ cart.find(item => item.id === product.id)?.quantity || 0 }}
                                </span>
                                <button 
                                  class="btn btn-sm btn-primary"
                                  @click="addToCart(product)"
                                  :disabled="product.stock === 0 || (cart.find(item => item.id === product.id)?.quantity || 0) >= product.stock"
                                >
                                  <i class="mdi mdi-plus"></i>
                                </button>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  
                  <!-- 分页控制器 -->
                  <div class="pagination-wrapper mt-4" v-if="totalPages > 1">
                    <nav>
                      <ul class="pagination pagination-rounded justify-content-center">
                        <!-- 首页按钮 -->
                        <li class="page-item" :class="{ disabled: currentPage === 1 }">
                          <a class="page-link" href="javascript:void(0);" @click="goToPage(1)" title="首页">
                            <i class="mdi mdi-chevron-double-left"></i>
                          </a>
                        </li>
                        
                        <!-- 上一页按钮 -->
                        <li class="page-item" :class="{ disabled: currentPage === 1 }">
                          <a class="page-link" href="javascript:void(0);" @click="prevPage" title="上一页">
                            <i class="mdi mdi-chevron-left"></i>
                          </a>
                        </li>
                        
                        <!-- 省略号（前） -->
                        <li class="page-item disabled" v-if="pageRange.start > 1">
                          <a class="page-link" href="javascript:void(0);">...</a>
                        </li>
                        
                        <!-- 页码按钮 -->
                        <li class="page-item" v-for="page in (pageRange.end - pageRange.start + 1)" :key="page + pageRange.start - 1" 
                            :class="{ active: currentPage === page + pageRange.start - 1 }">
                          <a class="page-link" href="javascript:void(0);" @click="goToPage(page + pageRange.start - 1)">
                            {{ page + pageRange.start - 1 }}
                          </a>
                        </li>
                        
                        <!-- 省略号（后） -->
                        <li class="page-item disabled" v-if="pageRange.end < totalPages">
                          <a class="page-link" href="javascript:void(0);">...</a>
                        </li>
                        
                        <!-- 下一页按钮 -->
                        <li class="page-item" :class="{ disabled: currentPage === totalPages }">
                          <a class="page-link" href="javascript:void(0);" @click="nextPage" title="下一页">
                            <i class="mdi mdi-chevron-right"></i>
                          </a>
                        </li>
                        
                        <!-- 末页按钮 -->
                        <li class="page-item" :class="{ disabled: currentPage === totalPages }">
                          <a class="page-link" href="javascript:void(0);" @click="goToPage(totalPages)" title="末页">
                            <i class="mdi mdi-chevron-double-right"></i>
                          </a>
                        </li>
                      </ul>
                    </nav>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 购物车悬浮球，移动到右下角 -->
        <div class="cart-float" @click="showCart = true">
          <div class="cart-icon">
            <i class="mdi mdi-cart"></i>
            <span class="cart-count">{{ cartCount }}</span>
          </div>
        </div>
        
        <!-- 购物车弹窗 -->
        <div class="cart-modal" v-if="showCart">
          <div class="cart-content">
            <div class="cart-header">
              <h5>我的购物车</h5>
              <button class="close-btn" @click="showCart = false">
                <i class="mdi mdi-close"></i>
              </button>
            </div>
            
            <div class="cart-body">
              <div v-if="cart.length === 0" class="empty-cart">
                <i class="mdi mdi-cart-outline"></i>
                <p>购物车是空的</p>
              </div>
              
              <div v-else class="cart-items">
                <div 
                  v-for="item in cart" 
                  :key="item.id" 
                  class="cart-item"
                >
                  <div class="item-image">
                    <img :src="getImageUrl(item)" :alt="item.name">
                  </div>
                  <div class="item-details">
                    <h6>{{ item.name }}</h6>
                    <p>¥{{ item.price.toFixed(2) }} x {{ item.quantity }}</p>
                  </div>
                  <div class="item-actions">
                    <button 
                      class="btn btn-sm btn-inverse-primary"
                      @click="removeFromCart(item.id)"
                    >
                      <i class="mdi mdi-minus"></i>
                    </button>
                    <span class="quantity-display mx-2">{{ item.quantity }}</span>
                    <button 
                      class="btn btn-sm btn-primary"
                      @click="addToCart({ id: item.id, stock: item.stock })"
                      :disabled="item.quantity >= item.stock"
                    >
                      <i class="mdi mdi-plus"></i>
                    </button>
                  </div>
                </div>
              </div>
            </div>
            
            <div class="cart-footer">
              <div class="cart-total">
                <p>总计: <strong>¥{{ cartTotal }}</strong></p>
              </div>
              <div class="cart-actions">
                <button 
                  class="btn btn-outline-danger"
                  @click="clearCart"
                  :disabled="cart.length === 0"
                >
                  清空购物车
                </button>
                <button 
                  class="btn btn-success"
                  @click="checkout"
                  :disabled="cart.length === 0"
                >
                  结算
                </button>
              </div>
            </div>
          </div>
        </div>
        
        <footer class="footer">
          <div class="d-sm-flex justify-content-center justify-content-sm-between">
            <span class="float-none float-sm-right d-block mt-1 mt-sm-0 text-center">版权所有 © 模板。保留所有权利。</span>
          </div>
        </footer>
      </div>
    </div>
  </div>
</template>

<style scoped>
@import '@/assets/vendors/feather/feather.css';
@import '@/assets/vendors/mdi/css/materialdesignicons.min.css';
@import '@/assets/vendors/ti-icons/css/themify-icons.css';
@import '@/assets/vendors/typicons/typicons.css';
@import '@/assets/vendors/simple-line-icons/css/simple-line-icons.css';
@import '@/assets/vendors/css/vendor-bundle-base.css';

/* 修复搜索后内容宽度问题 */
.main-panel {
  width: calc(100% - 235px); /* 减去侧边栏宽度 */
  min-height: calc(100vh - 70px); /* 减去顶部导航高度 */
  display: flex;
  flex-direction: column;
}

.content-wrapper {
  padding: 2.375rem 2.375rem;
  width: 100%;
  flex-grow: 1;
  overflow-x: hidden; /* 防止水平滚动 */
}

/* 商品列表样式 */
.product-grid {
  display: flex;
  flex-wrap: wrap;
  margin-top: 1.5rem;
}

.product-card {
  height: 100%;
  transition: transform 0.3s;
  border-radius: 8px;
  border: 1px solid #ebedf2;
  background-color: #fff;
  box-shadow: 0 0 10px 0 rgba(183, 192, 206, 0.2);
}

.product-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
}

.product-img {
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 8px 8px 0 0;
}

.product-img img {
  max-height: 100%;
  object-fit: cover;
}

.product-name {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 0.25rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.product-description {
  font-size: 0.8rem;
  color: #6c757d;
  margin-bottom: 0.5rem;
  height: 40px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.product-price {
  font-size: 1.1rem;
  font-weight: bold;
  color: #4B49AC;
  margin-bottom: 0.25rem;
}

.product-stock {
  font-size: 0.75rem;
  color: #28a745;
  margin-bottom: 0;
}

.low-stock {
  color: #dc3545;
}

.product-actions {
  display: flex;
  align-items: center;
}

/* 搜索框样式 */
.search-form {
  position: relative;
}

.search-form i {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  color: #6c757d;
}

.search-form .form-control {
  padding-left: 40px;
  border-radius: 20px;
  border: 1px solid #e9ecef;
  background-color: #f8f9fa;
}

/* 美化分页控制样式 */
.pagination-wrapper {
  margin-top: 1.5rem;
}

.pagination-rounded .page-item {
  margin: 0 3px;
}

.pagination-rounded .page-link {
  border-radius: 50px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  color: #4B49AC;
  background-color: #f8f9fa;
  transition: all 0.3s ease;
  font-weight: 500;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.pagination-rounded .page-item.active .page-link {
  background-color: #4B49AC;
  color: #fff;
  box-shadow: 0 4px 8px rgba(75, 73, 172, 0.3);
}

.pagination-rounded .page-item.disabled .page-link {
  color: #6c757d;
  pointer-events: none;
  background-color: #e9ecef;
  box-shadow: none;
}

.pagination-rounded .page-link:hover {
  background-color: #e9ecef;
  color: #4B49AC;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.pagination-rounded .page-item.active .page-link:hover {
  background-color: #4B49AC;
  color: #fff;
}

/* 购物车悬浮球样式 - 移到右下角 */
.cart-float {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: #4B49AC;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
  z-index: 1000;
  transition: transform 0.3s, background-color 0.3s;
}

.cart-float:hover {
  transform: scale(1.1);
  background-color: #3f3d99;
}

.cart-icon {
  position: relative;
  color: white;
  font-size: 1.5rem;
}

.cart-count {
  position: absolute;
  top: -10px;
  right: -10px;
  background-color: #dc3545;
  color: white;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  font-size: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 购物车弹窗样式 */
.cart-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
}

.cart-content {
  width: 90%;
  max-width: 500px;
  background-color: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
  max-height: 80vh;
}

.cart-header {
  padding: 1rem;
  border-bottom: 1px solid #dee2e6;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.cart-header h5 {
  margin: 0;
  font-weight: 600;
}

.close-btn {
  background: transparent;
  border: none;
  font-size: 1.25rem;
  cursor: pointer;
  color: #6c757d;
}

.cart-body {
  padding: 1rem;
  overflow-y: auto;
  flex-grow: 1;
  max-height: 50vh;
}

.empty-cart {
  text-align: center;
  padding: 2rem 0;
  color: #6c757d;
}

.empty-cart i {
  font-size: 3rem;
  margin-bottom: 1rem;
}

.cart-items {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.cart-item {
  display: flex;
  align-items: center;
  padding: 0.5rem;
  border-radius: 4px;
  border: 1px solid #dee2e6;
}

.item-image {
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 1rem;
  border-radius: 4px;
  overflow: hidden;
}

.item-image img {
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;
}

.item-details {
  flex-grow: 1;
}

.item-details h6 {
  margin: 0 0 0.25rem;
  font-weight: 600;
}

.item-details p {
  margin: 0;
  color: #6c757d;
  font-size: 0.875rem;
}

.item-actions {
  display: flex;
  align-items: center;
}

.cart-footer {
  padding: 1rem;
  border-top: 1px solid #dee2e6;
}

.cart-total {
  text-align: right;
  margin-bottom: 1rem;
}

.cart-total p {
  margin: 0;
  font-size: 1.1rem;
}

.cart-actions {
  display: flex;
  justify-content: space-between;
}

/* 适配移动端 */
@media (max-width: 576px) {
  .product-img {
    height: 120px;
  }
  
  .product-name {
    font-size: 0.9rem;
  }
  
  .product-description {
    font-size: 0.75rem;
    height: 35px;
  }
  
  .product-price {
    font-size: 1rem;
  }
  
  .cart-content {
    width: 95%;
  }
  
  .cart-item {
    flex-direction: column;
    text-align: center;
  }
  
  .item-image {
    margin-right: 0;
    margin-bottom: 0.5rem;
  }
  
  .item-details {
    margin-bottom: 0.5rem;
  }
}

.quantity-display {
  min-width: 20px;
  text-align: center;
}
</style>